<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component_from</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入prop-type库-->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    /*
    * 自定义包含表单的组件
    * 1、输入用户名密码后点击登录提示输入信息
    * 2、不提交表单
    * */

    class LoginFrom extends React.Component {
        constructor(props) {
            super(props);
            //初始化状态
            this.state = {
                pwd:''
            }
            this.handleSubmit = this.handleSubmit.bind(this)
            this.handleChnage = this.handleChnage.bind(this)
        }

        handleSubmit(event){
            // 阻止事件默认行为
            event.preventDefault()
            const name = this.nameInput.value
            alert(`准备提交的用户名为${name},密码为${this.state.pwd}`)
        }
        handleChnage(event){
            //读取输入的值
            const pwd = event.target.value
            //更新pwd状态
            this.setState({pwd});
        }
        // ref={input => this.passwordInput = input}
        render() {
            return (
               <form onSubmit={this.handleSubmit}>
                   用户名：<input type="text" ref={input => this.nameInput = input} />
                   密码：<input type="password" value={this.state.pwd} onChange={this.handleChnage} />
                   <input type="submit" value="登录"/>
               </form>
            );
        }
    }
    ReactDOM.render(<LoginFrom />,document.getElementById('example'))
</script>
</body>
</html>